<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 标题 -->
    <title>小兔鲜儿-新鲜、惠民、快捷！</title>
    <!-- 网站说明 -->
    <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
    <!-- 关键字 -->
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 引入初始化文件 css reset base.css -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入common.css  公共的头部和底部 -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入首页的css文件 -->
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 头部模块开始 -->
    <header>
        <!-- 快捷导航 -->
        <div class="xtx-shortcut">
            <div class="container">
                <ul>
                    <li><a href="#">请先登录</a></li>
                    <li class="sep">|</li>
                    <li><a href="#">免费注册</a></li>
                    <li class="sep">|</li>
                    <li><a href="#">我的订单</a></li>
                    <li class="sep">|</li>
                    <li><a href="user.html">会员中心</a></li>
                    <li class="sep">|</li>
                    <li><a href="#">帮助中心</a></li>
                    <li class="sep">|</li>
                    <li><a href="#">在线客服</a></li>
                    <li class="sep">|</li>
                    <li>
                        <a href="#">
                            <i></i>
                            手机版
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 导航栏 -->
        <div class="xtx-main-nav container">
            <!-- logo -->
            <div class="logo">
                <h1>
                    <a href="./index.html" title="小兔鲜儿">小兔鲜儿</a>
                </h1>
            </div>
            <!-- nav -->
            <nav class="nav">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">生鲜</a></li>
                    <li><a href="#">美食</a></li>
                    <li><a href="#">餐厨</a></li>
                    <li><a href="#">电器</a></li>
                    <li><a href="#">居家</a></li>
                    <li><a href="#">洗护</a></li>
                    <li><a href="#">孕婴</a></li>
                    <li><a href="#">服装</a></li>
                </ul>
            </nav>
            <!-- search -->
            <div class="search">
                <input type="text" placeholder="搜一搜">
            </div>
            <!-- car -->
            <a href="#" class="car">
                <span>2</span>
            </a>
        </div>
    </header>
    <!-- 头部模块结束 -->

    <!-- 首页入口模块 -->
    <section class="xtx-entry">
        <div class="container">
            <!-- 轮播图模块 -->
            <div class="swiper">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./uploads/banner_1.png" alt="">
                        </a>
                    </li>
                </ul>

                <!-- 左侧按钮 -->
                <a href="javascript:;" class="prev"></a>
                <!-- 右侧按钮 -->
                <a href="javascript:;" class="next"></a>

                <ul class="pagination">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li class="active"></li>
                </ul>
            </div>
            <!-- 侧边栏  分类模块-->
            <aside class="category">
                <ul>
                    <li>
                        生鲜
                        <a href="#">水果</a>
                        <a href="#">蔬菜</a>
                    </li>
                    <li>
                        美食
                        <a href="#">数码产品</a>
                    </li>
                    <li>
                        餐厨
                        <a href="#">水果</a>
                        <a href="#">蔬菜</a>
                    </li>
                    <li>
                        电器
                        <a href="#">床品</a>
                        <a href="#">四件套</a>
                        <a href="#">被枕</a>
                    </li>

                    <li>
                        居家
                        <a href="#">奶粉</a>
                        <a href="#">玩具</a>
                        <a href="#">辅食</a>
                    </li>
                    <li>
                        洗护
                        <a href="#">洗发</a>
                        <a href="#">洗护</a>
                        <a href="#">美妆</a>
                    </li>

                    <li>
                        孕婴
                        <a href="#">奶粉</a>
                        <a href="#">玩具</a>
                    </li>
                    <li>
                        服饰
                        <a href="#">女装</a>
                        <a href="#">男装</a>
                    </li>
                    <li>
                        杂货
                        <a href="#">户外</a>
                        <a href="#">图书</a>
                    </li>
                    <li>
                        品牌
                        <a href="#">品牌制造</a>
                    </li>
                </ul>
            </aside>
        </div>
    </section>

    <!-- 新鲜好物模块开始 -->
    <section class="xtx-new-goods container">
        <!-- 头 -->
        <div class="goods-hd">
            <h3>
                新鲜好物
                <span>新鲜出炉 品质靠谱</span>
            </h3>
            <a href="#" class="all">查看全部 > </a>
        </div>
        <!-- 主体 -->
        <div class="goods-list">
            <ul>
                <li>
                    <a href="#">
                        <img src="./uploads/new_goods_1.jpg" alt="">
                        <h4>睿米无线吸尘器F8</h4>
                        <p>￥<span>899</span></p>
                    </a>
                    <i>新品</i>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/new_goods_2.jpg" alt="">
                        <h4>睿米无线吸尘器F8</h4>
                        <p>￥<span>899</span></p>
                    </a>
                    <i>折扣</i>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/new_goods_3.jpg" alt="">
                        <h4>睿米无线吸尘器F8</h4>
                        <p>￥<span>899</span></p>
                    </a>

                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/new_goods_4.jpg" alt="">
                        <h4>睿米无线吸尘器F8</h4>
                        <p>￥<span>899</span></p>
                    </a>

                </li>

            </ul>
        </div>
    </section>
    <!-- 新鲜好物模块结束 -->

    <!-- 人气推荐模块开始 -->
    <section class="xtx-new-goods container renqi">
        <!-- 头 -->
        <div class="goods-hd">
            <h3>
                人气推荐
                <span>人气爆款 不容错过</span>
            </h3>

        </div>
        <!-- 主体 -->
        <div class="goods-list">
            <ul>
                <li>
                    <a href="#">
                        <img src="./uploads/popular_1.jpg" alt="">
                        <h4>睿米无线吸尘器F8</h4>
                        <p>￥<span>899</span></p>
                    </a>
                    <i>新品</i>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/popular_2.jpg" alt="">
                        <h4>睿米无线吸尘器F8</h4>
                        <p>￥<span>899</span></p>
                    </a>
                    <i>新品</i>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/popular_3.jpg" alt="">
                        <h4>睿米无线吸尘器F8</h4>
                        <p>￥<span>899</span></p>
                    </a>
                    <i>新品</i>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/popular_4.jpg" alt="">
                        <h4>睿米无线吸尘器F8</h4>
                        <p>￥<span>899</span></p>
                    </a>
                    <i>新品</i>
                </li>

            </ul>
        </div>
    </section>
    <!-- 人气推荐模块结束 -->

    <!-- 热门品牌 -->
    <section class="xtx-hot-remen">
        <div class="container">
            <!-- 头 -->
            <div class="goods-hd">
                <h3>
                    热门品牌
                    <span>国际经典 品质保证</span>
                </h3>
                <ul class="arrow">
                    <li> &lt; </li>
                    <li> &gt; </li>
                </ul>
            </div>
            <div class="remen-list">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./uploads/brand_goods_1.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/brand_goods_2.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/brand_goods_3.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/brand_goods_4.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/brand_goods_5.jpg" alt="">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </section>

    <!-- 生鲜模块start -->
    <section class="xtx-fresh-goods container">
        <!-- 头 -->
        <div class="goods-hd">
            <h3>
                生鲜
            </h3>
            <ul class="tab">
                <li class="active">水果</li>
                <li>蔬菜</li>
                <li>肉禽蛋</li>
                <li>裤装</li>
                <li>衬衫</li>
                <li>T恤</li>
                <li>内衣</li>
            </ul>
            <a href="#" class="all">查看全部 > </a>
        </div>
        <!-- 主体 -->
        <div class="goods-content">
            <div class="goods-content-l">
                <a href="#">
                    <img src="./uploads/fresh_goods_cover.png" alt="">
                </a>
            </div>
            <div class="goods-content-r">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <h4>红功夫 麻辣小龙虾1.5kg
                                4-6钱/25-32只
                                火锅食材火锅食材</h4>
                            <p>￥<span>59</span></p>
                        </a>

                        <div class="baby">
                            <h3>找相似</h3>
                            <a href="#">发现更多宝贝 > </a>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <h4>红功夫 麻辣小龙虾1.5kg
                                4-6钱/25-32只
                                火锅食材火锅食材</h4>
                            <p>￥<span>59</span></p>
                        </a>

                        <div class="baby">
                            <h3>找相似</h3>
                            <a href="#">发现更多宝贝 > </a>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <h4>红功夫 麻辣小龙虾1.5kg
                                4-6钱/25-32只
                                火锅食材火锅食材</h4>
                            <p>￥<span>59</span></p>
                        </a>

                        <div class="baby">
                            <h3>找相似</h3>
                            <a href="#">发现更多宝贝 > </a>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <h4>红功夫 麻辣小龙虾1.5kg
                                4-6钱/25-32只
                                火锅食材火锅食材</h4>
                            <p>￥<span>59</span></p>
                        </a>

                        <div class="baby">
                            <h3>找相似</h3>
                            <a href="#">发现更多宝贝 > </a>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <h4>红功夫 麻辣小龙虾1.5kg
                                4-6钱/25-32只
                                火锅食材火锅食材</h4>
                            <p>￥<span>59</span></p>
                        </a>

                        <div class="baby">
                            <h3>找相似</h3>
                            <a href="#">发现更多宝贝 > </a>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <h4>红功夫 麻辣小龙虾1.5kg
                                4-6钱/25-32只
                                火锅食材火锅食材</h4>
                            <p>￥<span>59</span></p>
                        </a>

                        <div class="baby">
                            <h3>找相似</h3>
                            <a href="#">发现更多宝贝 > </a>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <h4>红功夫 麻辣小龙虾1.5kg
                                4-6钱/25-32只
                                火锅食材火锅食材</h4>
                            <p>￥<span>59</span></p>
                        </a>

                        <div class="baby">
                            <h3>找相似</h3>
                            <a href="#">发现更多宝贝 > </a>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <h4>红功夫 麻辣小龙虾1.5kg
                                4-6钱/25-32只
                                火锅食材火锅食材</h4>
                            <p>￥<span>59</span></p>
                        </a>

                        <div class="baby">
                            <h3>找相似</h3>
                            <a href="#">发现更多宝贝 > </a>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </section>
    <!-- 生鲜模块end -->


    <!-- 生鲜模块start -->
    <section class="xtx-fresh-goods container">
        <!-- 头 -->
        <div class="goods-hd">
            <h3>
                生鲜
            </h3>
            <ul class="tab">
                <li class="active">水果</li>
                <li>蔬菜</li>
                <li>肉禽蛋</li>
                <li>裤装</li>
                <li>衬衫</li>
                <li>T恤</li>
                <li>内衣</li>
            </ul>
            <a href="#" class="all">查看全部 > </a>
        </div>
        <!-- 主体 -->
        <div class="goods-content">
            <div class="goods-content-l">
                <a href="#">
                    <img src="./uploads/fresh_goods_cover.png" alt="">
                </a>
            </div>
            <div class="goods-content-r">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <h4>红功夫 麻辣小龙虾1.5kg
                                4-6钱/25-32只
                                火锅食材火锅食材</h4>
                            <p>￥<span>59</span></p>
                        </a>

                        <div class="baby">
                            <h3>找相似</h3>
                            <a href="#">发现更多宝贝 > </a>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <h4>红功夫 麻辣小龙虾1.5kg
                                4-6钱/25-32只
                                火锅食材火锅食材</h4>
                            <p>￥<span>59</span></p>
                        </a>

                        <div class="baby">
                            <h3>找相似</h3>
                            <a href="#">发现更多宝贝 > </a>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <h4>红功夫 麻辣小龙虾1.5kg
                                4-6钱/25-32只
                                火锅食材火锅食材</h4>
                            <p>￥<span>59</span></p>
                        </a>

                        <div class="baby">
                            <h3>找相似</h3>
                            <a href="#">发现更多宝贝 > </a>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <h4>红功夫 麻辣小龙虾1.5kg
                                4-6钱/25-32只
                                火锅食材火锅食材</h4>
                            <p>￥<span>59</span></p>
                        </a>

                        <div class="baby">
                            <h3>找相似</h3>
                            <a href="#">发现更多宝贝 > </a>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <h4>红功夫 麻辣小龙虾1.5kg
                                4-6钱/25-32只
                                火锅食材火锅食材</h4>
                            <p>￥<span>59</span></p>
                        </a>

                        <div class="baby">
                            <h3>找相似</h3>
                            <a href="#">发现更多宝贝 > </a>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <h4>红功夫 麻辣小龙虾1.5kg
                                4-6钱/25-32只
                                火锅食材火锅食材</h4>
                            <p>￥<span>59</span></p>
                        </a>

                        <div class="baby">
                            <h3>找相似</h3>
                            <a href="#">发现更多宝贝 > </a>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <h4>红功夫 麻辣小龙虾1.5kg
                                4-6钱/25-32只
                                火锅食材火锅食材</h4>
                            <p>￥<span>59</span></p>
                        </a>

                        <div class="baby">
                            <h3>找相似</h3>
                            <a href="#">发现更多宝贝 > </a>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./uploads/fresh_goods_1.jpg" alt="">
                            <h4>红功夫 麻辣小龙虾1.5kg
                                4-6钱/25-32只
                                火锅食材火锅食材</h4>
                            <p>￥<span>59</span></p>
                        </a>

                        <div class="baby">
                            <h3>找相似</h3>
                            <a href="#">发现更多宝贝 > </a>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </section>
    <!-- 生鲜模块end -->

    <!-- 最新专题模块 start -->
    <section class="news">
        <div class="container">
            <!-- 头 -->
            <div class="goods-hd">
                <h3>
                    生鲜
                </h3>
                <a href="#" class="all">查看全部 > </a>
            </div>
            <div class="news-list">
                <ul>
                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./uploads/topic_goods_1.jpg" alt="">
                                <!-- 底部 -->
                                <div class="info">
                                    <h4>好好学习才不算辜负自己</h4>
                                    <p>餐厨起居洗护好物</p>
                                    <span>￥29.9起</span>
                                </div>
                            </div>
                        </a>

                        <div class="news-b">
                            <span>1220</span>
                            <span>1880</span>
                            <span>246</span>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./uploads/topic_goods_2.jpg" alt="">
                                <!-- 底部 -->
                                <div class="info">
                                    <h4>好好学习才不算辜负自己</h4>
                                    <p>餐厨起居洗护好物</p>
                                    <span>￥29.9起</span>
                                </div>
                            </div>
                        </a>

                        <div class="news-b">
                            <span>1220</span>
                            <span>1880</span>
                            <span>246</span>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic">
                                <img src="./uploads/topic_goods_3.jpg" alt="">
                                <!-- 底部 -->
                                <div class="info">
                                    <h4>好好学习才不算辜负自己</h4>
                                    <p>餐厨起居洗护好物</p>
                                    <span>￥29.9起</span>
                                </div>
                            </div>
                        </a>

                        <div class="news-b">
                            <span>1220</span>
                            <span>1880</span>
                            <span>246</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </section>
    <!-- 最新专题模块  end -->


    <!-- 底部开始 -->
    <footer>
        <!-- 上盒子 -->
        <div class="footer-t">
            <div class="container">
                <dl class="customer">
                    <dt>客户服务</dt>
                    <dd class="zaixian">
                        <a href="#">
                            <p>在线客服</p>
                        </a>
                    </dd>
                    <dd class="wenti">
                        <a href="#">
                            <p>问题反馈</p>
                        </a>
                    </dd>
                </dl>
                <dl class="us">
                    <dt>关注我们</dt>
                    <dd class="gongzhonghao">
                        <a href="#">
                            <p>公众号</p>
                        </a>
                    </dd>
                    <dd class="weibo">
                        <a href="#">
                            <p>微博</p>
                        </a>
                    </dd>
                </dl>
                <!-- 下载模块 -->
                <dl class="download">
                    <dt>下载APP</dt>
                    <dd class="qrcode">
                        <img src="./uploads/qrcode.png" alt="">
                    </dd>
                    <dd class="down">
                        <p>扫描二维码</p>
                        <p>立马下载APP</p>
                        <a href="#">下载页面</a>
                    </dd>
                </dl>
                <!-- 热线模块 -->
                <dl class="hotline">
                    <dt>服务热线</dt>
                    <dd>
                        <p>400-0000-000</p>
                        <p>周一至周日 8:00-18:00</p>
                    </dd>
                </dl>
            </div>
        </div>
        <!-- 下盒子 -->
        <div class="footer-b">
            <!-- 服务模块 -->
            <div class="xtx-service">
                <a href="#">价格亲民</a>
                <a href="#">物流快捷</a>
                <a href="#">品质新鲜</a>
            </div>
            <!-- 版权模块 -->
            <div class="xtx-copyright">
                <p>
                    <a href="#">关于我们</a> |
                    <a href="#">帮助中心</a> |
                    <a href="#">售后服务</a> |
                    <a href="#">配送与验收</a> |
                    <a href="#">商务合作</a> |
                    <a href="#">搜索推荐</a> |
                    <a href="#">友情链接</a>
                </p>
                <p>CopyRight @ 小兔鲜儿</p>
            </div>
        </div>
    </footer>
    <!-- 底部结束 -->

</body>

</html>